<script setup lang="ts">
// 公共组件封装   1：在components创建组件  2：定义组件的类型  3:直接使用   4：处理内部逻辑

import { ref } from 'vue'

// 组件要求：内容可自行定义  可点击选择（选择后父组件要拿到选中项的值）默认选中，可修改选中
const gender = ref<number>(1)
// const setGender = (val: number | string | boolean) => {
//   gender.value = val
// }
/*
vue3的v-model
   <子组件 :modelValue="appVal"  @update:modelValue="appVal=$event"   />
   <子组件 v-model:modelValue="appVal"   />
   <子组件 v-model="appVal"   />
   子组件内
      defineProps<{
        modelValue:number
      }>()
      const emits=defineEmits<{
          (e:'update:modelValue',value:number):void
      }>()
      emits('update:modelValue',实参值)

*/
</script>

<template>
  <div class="play-page">play:{{ gender }}</div>
  <CpRadioBtn
    :options="[
      {
        label: '男',
        value: 1
      },
      {
        label: '女',
        value: 0
      },
      {
        label: '保密',
        value: -1
      }
    ]"
    v-model="gender"
  ></CpRadioBtn>
</template>

<style lang="scss" scoped></style>
